<template>
  <div class="admin-home">
    <div class="home-icon">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="home-mean">
      <div class="home-mean-head">
        <div class="home-mean-user">
          <div class="home-mean-user-icon">
            <img src="../assets/image/user.png" alt="" />
          </div>
          <div class="home-mean-user-main">
            <span>34522</span>
            <span>商城用户</span>
          </div>
        </div>
        <div class="home-mean-user">
          <div class="home-mean-user-icon" style="background-color: #ff4500">
            <img src="../assets/image/doctor.png" alt="" />
          </div>
          <div class="home-mean-user-main">
            <span>140</span>
            <span>医疗订单</span>
          </div>
        </div>
        <div class="home-mean-user">
          <div
            class="home-mean-user-icon"
            style="background-color: rgba(255, 215, 0, 0.8)"
          >
            <img src="../assets/image/car.png" alt="" />
          </div>
          <div class="home-mean-user-main">
            <span>345</span>
            <span>商城订单</span>
          </div>
        </div>
        <div class="home-mean-user">
          <div class="home-mean-user-icon" style="background-color: #00bfff">
            <img src="../assets/image/statistics.png" alt="" />
          </div>
          <div class="home-mean-user-main">
            <span>34500</span>
            <span>交易记录</span>
          </div>
        </div>
      </div>

      <div class="home-mean-main">
        <div>
          <span>商城用户</span>
          <div>
            <span>新用户注册</span>
            <span>0个</span>
          </div>
          <div>
            <span>老用户登录</span>
            <span>0个</span>
          </div>
          <div>
            <span>下单新用户</span>
            <span>0个</span>
          </div>
          <div>
            <span>下单老用户</span>
            <span>0个</span>
          </div>
          <div>
            <span>浏览量</span>
            <span>0个</span>
          </div>
        </div>
        <div>
          <span>订单统计信息</span>
          <div>
            <span>未处理订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>代发货订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>待结算订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>已成交易订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>交易失败</span>
            <span>0个</span>
          </div>
        </div>
        <div>
          <span>订单统计信息</span>
          <div>
            <span>未处理订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>代发货订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>待结算订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>已成交易订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>交易失败</span>
            <span>0个</span>
          </div>
        </div>
        <div>
          <span>订单统计信息</span>
          <div>
            <span>未处理订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>代发货订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>待结算订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>已成交易订单</span>
            <span>0个</span>
          </div>
          <div>
            <span>交易失败</span>
            <span>0个</span>
          </div>
        </div>
      </div>
      <div class="home-mean-foot">
        <div class="home-mean-foot-a">
          <router-link style="color: #fff" to="/admin/index/prolist/addpro"
            ><img src="../assets/image/user.png" alt="" /><span>添加商品</span>
          </router-link>
        </div>
        <div class="home-mean-foot-a">
          <router-link
            style="background-color: #00bfff"
            to="/admin/index/prolist"
            ><img src="../assets/image/list.png" alt="" /><span>产品分类</span>
          </router-link>
        </div>
        <div class="home-mean-foot-a">
          <router-link style="background-color: #ff4500" to="/admin/index/order"
            ><img src="../assets/image/order.png" alt="" /><span>预约订单</span>
          </router-link>
        </div>
        <div class="home-mean-foot-a">
          <router-link
            style="background-color: #6a5acd"
            to="/admin/index/advertising/add"
            ><img src="../assets/image/advertising.png" alt="" /><span
              >添加广告</span
            >
          </router-link>
        </div>
        <div class="home-mean-foot-a">
          <router-link
            style="background-color: #ffd700"
            to="/admin/index/article/add"
            ><img src="../assets/image/article.png" alt="" /><span
              >添加文章</span
            >
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.admin-home {
  .home-mean {
    padding: 0 40px;
    margin-top: 40px;
    .home-mean-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      // padding: 0 40px;
      .home-mean-user {
        display: flex;
        // margin: 20px 0 0 20px;
        border-radius: 4px;
        overflow: hidden;
        // width: 200px;

        .home-mean-user-icon {
          width: 100px;
          text-align: center;
          height: 60px;
          background-color: #00ced1;
          img {
            width: 28px;
            margin: 16px 0;
          }
        }
        .home-mean-user-main {
          padding-top: 9px;
          width: 180px;
          text-align: center;
          display: flex;
          flex-direction: column;
          border: 1px solid gray;
          border-radius: 0 4px 4px 0;
          border-left: 0px;
        }
      }
    }
    .home-mean-main {
      padding-top: 8px;
      box-sizing: border-box;

      display: flex;
      justify-content: space-between;
      div {
        box-sizing: border-box;
        background-color: rgb(230, 230, 230);
        border: 1px solid gray;
        border-radius: 4px;
        width: 280px;
        // margin-left: 10px;
        span {
          margin: 8px 0 0 8px;
        }
        div {
          box-sizing: border-box;
          width: 276px;
          padding: 0 40px 4px 20px;
          background-color: #fff;
          margin: 4px 1px 0;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .home-mean-foot {
    margin-top: 40px;
    display: flex;

    .home-mean-foot-a {
      padding-right: 40px;

      a {
        border-radius: 4px;
        display: flex;
        width: 100px;
        background-color: #00ced1;
        text-align: center;
        // line-height: 80px;
        flex-direction: column;
        padding: 10px;
        text-decoration: none;

        img {
          width: 28px;
          margin: 10px auto;
        }
        span {
          color: #fff;
        }
      }
    }
  }
}
</style>
